<template>
  <a-modal
    centered
    title="领取资源"
    width="1600px"
    v-model="visible"
    :mask-closable="false"
    :closable="false"
    :footer="null"
    :z-index="1001"
    :keyboard="false"
    @cancel="onCallCancel"
  >
    <div class="l-call-phone">
      <a-row :gutter="60">
        <a-col :span="9" :style="{ overflow: 'hidden' }">
          <a-spin :spinning="leftLoading">
            <a-form-model
              ref="customerForm"
              :rules="rules"
              :model="customerForm"
            >
              <a-form-model-item label="基本状态">
                <a-input
                  disabled
                  :style="{ color: '#333' }"
                  :value="
                    `${customerForm.source_format} > ${customerForm.first_type_format} > ${customerForm.created_at_format}入库 > ${customerForm.phone_province}${customerForm.phone_city} > ${customerForm.tm_name}${customerForm.pt_name}`
                  "
                />
              </a-form-model-item>
              <a-form-model-item v-if="gType == 'pt'" label="专利名称">
                <a-input disabled placeholder="专利名称" v-model="customerForm.pt_name" />
              </a-form-model-item>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="客户名称">
                    <a-input placeholder="客户名称" v-model="customerForm.customer_name" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="所属行业">
                    <a-input placeholder="请输入所属行业" v-model="customerForm.industry" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
<!--                <a-col :span="12">-->
<!--                  <a-form-model-item label="状态" prop="customer_status">-->
<!--                    <a-select-->
<!--                      style="width: 100%"-->
<!--                      placeholder="选择客户状态"-->
<!--                      v-model="customerForm.customer_status"-->
<!--                    >-->
<!--                      <a-select-option v-for="(item,index) in statusOptions" :key="index" :value="index">-->
<!--                        {{ item }}-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
<!--                  </a-form-model-item>-->
<!--                </a-col>-->
                <a-col :span="12">
                  <a-form-model-item label="下次预约时间" prop="yy_time">
                    <a-date-picker
                      format="YYYY-MM-DD"
                      :disabled-date="disabledDate"
                      placeholder="请预约下次联系时间"
                      style="width: 100%;"
                      @change="onChangeTime"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="联系电话1">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input disabled :style="{ color: '#333' }" type="text" v-model="customerForm.phone" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" @click="phoneModal(customerForm.phone)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话2">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input type="text" v-model="customerForm.phone2" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" :disabled="customerForm.phone2 === ''" @click="phoneModal(customerForm.phone2)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-form-model-item label="微信同号">
                <a-row :gutter="20">
                  <a-col :span="12">
                    <a-input placeholder="请选择联系电话" v-model="customerForm.wechat"></a-input>
                  </a-col>
                  <a-col :span="12">
                    <a-row :gutter="10">
                      <a-col :span="12">
                        <a-button type="danger" block ghost @click="copy(customerForm.phone)">联系电话1</a-button>
                      </a-col>
                      <a-col :span="12">
                        <a-button :disabled="customerForm.phone2 === ''" type="danger" block ghost @click="copy(customerForm.phone2)">联系电话2</a-button>
                      </a-col>
                    </a-row>
                  </a-col>
<!--                  -->
                  <a-col :span="12">
                    <a-form-model-item label="状态" prop="customer_status">
                      <a-select
                        style="width: 100%"
                        placeholder="选择客户状态"
                        v-model="customerForm.customer_status"
                      >
                        <a-select-option v-for="(item,index) in statusOptions" :key="index" :value="item.id">
                          {{ item.title }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model-item>
              <a-form-model-item label="进展备注" prop="notes">
                <a-textarea :rows="5" v-model="customerForm.notes" placeholder="请输入进展备注"></a-textarea>
              </a-form-model-item>
              <a-form-model-item>
                <div style="color: #ff0000;font-size: 15px;line-height: 24px;margin-top: 10px;">请顾问如实填写信息质量，推广部需要你们的真实反馈，让我们的数据变得更加优质，谢谢！</div>
              </a-form-model-item>
              <a-form-model-item>
                <a-row :style="{ marginTop: '30px' }">
                  <a-col :span="12" :style="{ textAlign: 'left' }">
                    <a-button type="default" @click="onSubmit(1)">
                      问题资源
                    </a-button>
                  </a-col>
                  <a-col :span="12" :style="{ textAlign: 'right' }">
                    <a-button type="default" @click="onSubmit(2)">
                      休了
                    </a-button>
                    <a-button type="primary" :style="{ marginLeft: '8px' }" @click="onSubmit(3)">
                      进库
                    </a-button>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-form-model>
          </a-spin>
        </a-col>
        <a-col :span="15">
          <a-card :title="false" style="min-height: 620px">
            <a-tabs type="card" @change="onRightTabs">
              <a-tab-pane key="1" tab="报价"></a-tab-pane>
              <a-tab-pane key="2" tab="常见问题"></a-tab-pane>
            </a-tabs>
            <question v-if="rightTab == 1"></question>
            <my-article v-if="rightTab == 2"></my-article>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <telephone v-if="telVisible" :telephone="telephone" @cancel="closePhoneList"></telephone>
  </a-modal>
</template>

<script>
  import store from 'store'
  import Telephone from '@/components/CallPhone/Telephone'
  import Question from '@/components/CallPhone/Question'
  import MyArticle from '@/components/CallPhone/Article'
  import moment from 'moment'
  import { takeAbandon } from '@/api/customer'
  import { getReceive, getReceiveWorkSh, saveReceive, signQuestionCustomer } from '@/api/adviser'

  export default {
    name: 'CallPhone',
    props: {
      type: {
        type: String,
        default: ''
      }
    },
    components: {
      Telephone,
      MyArticle,
      Question
    },
    data () {
      return {
        visible: false,
        leftLoading: true,
        customerForm: {},
        statusOptions: {},
        rules: {
          customer_status: [
            { required: true, message: '必须进展状态', trigger: 'change' }
          ],
          yy_time: [
            { required: true, message: '必须预约下次联系的时间', trigger: 'change' }
          ]
        },
        telVisible: false,
        telephone: '',
        rightTab: '1',
        gType: store.get('Group_Type')
      }
    },
    created () {
      this.getReceive(this.type)
    },
    methods: {
      moment,
      getReceive (receiveType) {
        const app = this
        const arr = []
        app.leftLoading = true
        if (receiveType === 'new') {
          getReceive(receiveType).then(res => {
            if (res.status === 0) {
              app.customerForm = res.result.customer
              // app.statusOptions = res.result.customer_status_opts
              for (const k in res.result.customer_status_opts) {
                const data = {}
                data['id'] = (res.result.customer_status_opts[k].id).toString()
                data['title'] = res.result.customer_status_opts[k].title
                arr.push(data)
              }
              app.statusOptions = arr
              app.leftLoading = false
              app.visible = true
            } else {
              app.$warning({
                title: res.msg
              })
              this.onCallCancel()
            }
          })
        } else {
          getReceiveWorkSh(receiveType).then(res => {
            if (res.status === 0) {
              app.customerForm = res.result.customer
              // app.statusOptions = res.result.customer_status_opts
              for (const k in res.result.customer_status_opts) {
                const data = {}
                data['id'] = (res.result.customer_status_opts[k].id).toString()
                data['title'] = res.result.customer_status_opts[k].title
                arr.push(data)
              }
              app.statusOptions = arr
              app.leftLoading = false
              app.visible = true
            } else {
              app.$warning({
                title: res.msg
              })
              this.onCallCancel()
            }
          })
        }
      },
      onCallCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      },
      onChangeTime (date, dateString) {
        this.customerForm['yy_time'] = dateString
      },
      disabledDate (current) {
        // Can not select days before today and today
        return current && current < moment().endOf('day')
      },
      phoneModal (tel) {
        this.telephone = tel
        this.telVisible = true
      },
      copy (e) {
        this.customerForm.wechat = e
      },
      onRightTabs (key) {
        this.rightTab = key
      },
      onSubmit (type) {
        const app = this
        const data = {}
        app.$refs.customerForm.validate(valid => {
          if (valid) {
            for (const k in app.customerForm) {
              data['customer[' + k + ']'] = app.customerForm[k]
            }
            saveReceive(data).then(res => {
              if (res.status === 0) {
                // 问题
                if (type === 1) {
                  app.$confirm({
                    centered: true,
                    content: '是否标记此用户为问题客户',
                    zIndex: 1005,
                    onOk: () => {
                      signQuestionCustomer(app.customerForm.customer_id).then(b => {
                        if (b.status === 0) {
                          app.onCallCancel()
                        } else {
                          app.$warning({
                            title: b.msg
                          })
                        }
                      })
                    }
                  })
                }
                if (type === 2) {
                  app.$confirm({
                    title: '是否放弃本条资源',
                    zIndex: 119999,
                    onOk: () => {
                      takeAbandon(app.customerForm.customer_id).then(a => {
                        if (a.status === 0) {
                          app.onCallCancel()
                        } else {
                          app.$warning({
                            title: a.msg
                          })
                        }
                      })
                    }
                  })
                }
                if (type === 3) {
                  app.onCallCancel()
                }
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      closePhoneList (visible) {
        this.telVisible = visible
      }
    }
  }
</script>

<style>
  .l-call-phone .ant-form-item {
    margin-bottom: 0 !important;
  }
</style>
